class Vue {
  constructor(options) {
    // 1、记录options中的选项
    this.$options = options;
    this.$data = options.data;
    this.$methods = options.methods;
    this.$el = typeof options.el === 'string' ? document.querySelector(options.el) : ell
    // 2、将data中的属性注册为vue实例的属性
    this._proxyData(this.$data);
    this._proxyData(this.$methods);
    // 3、将data中的属性增加get set ，变为响应式
    new Observeable(this.$data);
    new Observeable(this.$methods);
    // 4、调用complier 解析dom
    new Compiler(this)
  }

  _proxyData(data) {
    Object.keys(data).forEach(key => {
      Object.defineProperty(this, key, {
        enumerable: true,
        configurable: true,
        get () {
          return data[key];
        },
        set (newValue) {
          if (data[key] === newValue) return;
          data[key] = newValue;
        }
      })

    })
  }
}